<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			body{
				background-color: gray;
				width:  100%;
				height: 10%;
			}
          ul{
             list-style-type: none;
          }
          .nav>li{
              float: left;
          }
          .nav a{
             display: block;
             text-decoration: none;
             width: 100px;
             height: 50px;
             text-align: center;
             line-height: 25px;
             color: #640000;
         }
         .nav li a:hover{
         	color: red;
         }
         .nav img{
         	float: left;
         }
         .drop-down{
             position: relative;
        }
        .drop-down-content{
        	 width: 300px;
        	 height: 200px;
             padding: 0px;
             position: absolute;
             left: -999px;
             border: 1px solid #0000FF;
         }
         .drop-down-content a{
         	padding-left: 10px;
         	padding-right:10px;
         	}
         .drop-down-content li p a:hover {
             color:red;
         }
         .drop-down-content li p a{
         	display: inline;
         	padding-right:10px;
         	
         }
         .drop-down-content li:nth-of-type(1) p {
         	border-bottom: 1px dashed black;
         	
         }
         .drop-down-content li:nth-of-type(2) p {
         	border-bottom: 1px dashed black;
         	
         }
         .nav .drop-down:hover .drop-down-content{
             left: 0;
         }
	 </style>
	</head>
	<body>
		<div class="div1">
		<ul class="nav">
		<img src="../../cho-6/img/logo.gif" />
         <li><a href="#">购物车|</a></li>
         <li><a href="#">优惠券|</a></li>
         <li><a href="#">快速注卡|</a></li>
         <li><a href="#">各地购课|</a></li>
         <li><a href="#">手机报|</a></li>
         <li class="drop-down"><a href="#">网站导航</a>
             <ul class="drop-down-content">
                 <li>
                 	<p>
                 			<a href="#">托福 </a>
							<a href="#">雅思</a>
							<a href="#">考研 </a>
							<a href="#">职称英语 </a>
							<a href="#">初中 </a>
							<a href="#">日语 </a>
                 	</p>
                 </li>
                 <li>
                 	    <p>
							<a href="#">网络课堂 </a>
							<a href="#">资讯中心</a>
							<a href="#">知识堂 </a>
							<a href="#">大师讲坛</a>
							<a href="#">学习论坛</a>
							<a href="#">学词 </a>
							<a href="#">考研搜校</a>
						</p>
                 </li>
                 <li>
                 	<p>
                 		<a href="#">M-Zone</a>
						<a href="#">手机报</a>
						<a href="#">时时英语</a>
                 	</p>
                 </li>
             </ul>
             </li>
    </ul>
    </div>
	</body>
</html>
